<template>
    <view class="tab">
         <view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)">
            <image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
            <view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}</view>
        </view>
    </view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
let color = ref('#666666')
let selectedColor = ref('#00BAB2')
let list = ref([])
let currentIndex = ref(0)

let props = defineProps({
	selectedIndex:{
		default:0
	}
})
onMounted(()=>{
	currentIndex.value = props.selectedIndex
	if(uni.getStorageSync('identify') == 'tom'){
		//角色1
		list.value = [
			{
				"pagePath": "/pages/index/index",
				"iconPath": "/static/tab/home.png",
				"selectedIconPath": "/static/tab/home_active.png",
				"text": "首页"
			},
			{
				"pagePath": "/pages/my/my",
				"iconPath": "/static/tab/my.png",
				"selectedIconPath": "/static/tab/my_active.png",
				"text": "我的"
			}
		]
	}else{
		//角色2
		list.value = [
			{
				"pagePath": "/pages/index/index",
				"iconPath": "/static/tab/home.png",
				"selectedIconPath": "/static/tab/home_active.png",
				"text": "首页"
			},
			{
			   "pagePath": "/pages/warn/warn",
			   "iconPath": "/static/tab/warn.png",
			   "selectedIconPath": "/static/tab/warn_active.png",
			   "text": "告警"
			},
			{
				"pagePath": "/pages/my/my",
				"iconPath": "/static/tab/my.png",
				"selectedIconPath": "/static/tab/my_active.png",
				"text": "我的"
			}
		]
	}
})

const switchTab = (item, index)=>{
	currentIndex.value = index
	uni.redirectTo({
		url:item.pagePath
	})
}
</script>

<style lang="scss" scoped>
.tab {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

	.tab-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.tab_img {
			width: 45rpx;
			height: 45rpx;
		}
		.tab_text {
			font-size: 25rpx;
			margin: 9rpx 0;
		}
	}
}
</style>